﻿<UserControl x:Class="TheVerge.Phone.Controls.NewsControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:con="clr-namespace:TheVerge.Phone.Controls"
    xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    xmlns:controlsPrimitives="clr-namespace:Microsoft.Phone.Controls.Primitives;assembly=Microsoft.Phone.Controls" 
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}">
    <UserControl.Resources>

        <Style TargetType="Button" BasedOn="{StaticResource clearButtonStyle}">
            <Setter Property="HorizontalAlignment" Value="Left" />
            <Setter Property="Padding" Value="0" />
        </Style>

        <DataTemplate x:Key="tileTemplate">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Image Source="{Binding LargeImageUri}" Grid.RowSpan="3" Stretch="UniformToFill" />

                <Rectangle Grid.RowSpan="3" Fill="{Binding Converter={StaticResource hlConv}}" Opacity="0.75" />

                <TextBlock Text="{Binding Title}" FontWeight="Bold" Margin="12, 4" FontSize="24"
                           TextWrapping="Wrap" VerticalAlignment="Top" TextTrimming="WordEllipsis" Foreground="White"  />
                <TextBlock Text="{Binding AuthorName}" Grid.Row="1" Margin="12, 2" FontSize="20.25" FontWeight="Medium" Foreground="White" />

                <Grid Background="{Binding NumberOfComments, Converter={StaticResource comBgConv}}" Grid.Row="2" HorizontalAlignment="Left" 
                      Margin="12, 2, 12, 12" >
                    <TextBlock Text="{Binding NumberOfComments}" Padding="3,1"
                               Foreground="White" Margin="{StaticResource PhoneHorizontalMargin}" />
                </Grid>

                <Button Click="Article_Click" Background="Transparent" 
                            HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.RowSpan="3" />
            </Grid>
        </DataTemplate>
        
        <DataTemplate x:Key="mainTemplate">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>

                <Image Source="{Binding SmallImageUri}" Height="99" Width="99" Grid.RowSpan="2" />

                <TextBlock Text="{Binding Title}" Grid.Column="1" Grid.ColumnSpan="2" Margin="{StaticResource PhoneHorizontalMargin}"
                                TextWrapping="Wrap" />

                <Grid Margin="{StaticResource PhoneMargin}" Background="{Binding NumberOfComments, Converter={StaticResource comBgConv}}" Grid.Row="1" Grid.Column="1" >
                    <TextBlock Text="{Binding NumberOfComments}" Padding="3,1"
                               Foreground="White" Margin="{StaticResource PhoneHorizontalMargin}" />
                </Grid>

                <!--<StackPanel Orientation="Horizontal" Grid.Column="1" Grid.Row="2" VerticalAlignment="Top">
                        <StackPanel.Resources>
                            <Style TargetType="TextBlock" BasedOn="{StaticResource PhoneTextSubtleStyle}">
                                <Setter Property="Margin" Value="0" />
                                <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeSmall}" />
                            </Style>
                        </StackPanel.Resources>
                        <StackPanel.Margin>
                            <StaticResource ResourceKey="PhoneHorizontalMargin"/>
                        </StackPanel.Margin>
                        <TextBlock Text="{Binding AuthorName}" />
                        <TextBlock Text=" | " />
                        <TextBlock Text="{Binding PublishedOn, Converter={StaticResource fnconv}}" />
                    </StackPanel>-->

                <Button Click="Article_Click" Background="Transparent" 
                            HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                            Grid.RowSpan="2" Grid.ColumnSpan="3" />
            </Grid>
        </DataTemplate>

        <DataTemplate x:Key="pivItemTemplate">
            <ScrollViewer HorizontalScrollBarVisibility="Disabled">
                <StackPanel Orientation="Vertical" HorizontalAlignment="Center">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="220" />
                            <RowDefinition Height="220" />
                            <RowDefinition Height="220" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="220" />
                            <ColumnDefinition Width="220" />
                        </Grid.ColumnDefinitions>

                        <ContentControl Grid.Row="0" Grid.ColumnSpan="2" ContentTemplate="{StaticResource tileTemplate}" Content="{Binding First}" />
                        <ContentControl Grid.Row="1" Grid.Column="0" ContentTemplate="{StaticResource tileTemplate}" Content="{Binding Second}" />
                        <ContentControl Grid.Row="1" Grid.Column="1" ContentTemplate="{StaticResource tileTemplate}" Content="{Binding Third}" />
                        <ContentControl Grid.Row="2" Grid.Column="0" ContentTemplate="{StaticResource tileTemplate}" Content="{Binding Fourth}" />
                        <ContentControl Grid.Row="2" Grid.Column="1"  ContentTemplate="{StaticResource tileTemplate}" Content="{Binding Fifth}" />

                        <ItemsControl Grid.Row="3" Grid.ColumnSpan="2" ItemsSource="{Binding ListItems}" ItemTemplate="{StaticResource mainTemplate}" Margin="{StaticResource PhoneVerticalMargin}" />
                    </Grid>
                </StackPanel>
            </ScrollViewer>
        </DataTemplate>
    </UserControl.Resources>

    <Grid x:Name="newsGrid" Background="{StaticResource PhoneBackgroundBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <con:HeaderControl />

        <controls:Pivot x:Name="thePiv" SelectionChanged="thePiv_SelectionChanged" Grid.Row="1"
                        DataContext="{Binding News}"
                        TitleTemplate="{StaticResource PivotTitleTemplate}"
                        SelectedItem="{Binding SelectedEntries, Mode=TwoWay}"
                        ItemsSource="{Binding Entries}" FontFamily="Portable User Interface"
                        ItemTemplate="{StaticResource pivItemTemplate}">
        </controls:Pivot>

        <con:ArticleEntryControl x:Name="aec1" Grid.RowSpan="2" />
    </Grid>
</UserControl>
